import React from 'react'
import PropTypes from 'prop-types'
import { Row, Col, Icon, Tooltip } from 'antd'
import { browserHistory } from 'react-router'
import { routerRedux, Link } from 'dva/router'
import style from './card.less'

const Card = ({ dataSource, ShowNames, RowTotal, EachColRender, pathName, dispatch }) => { // 数据源  需要展示的title数组 总共需要展示多少行  每一列的展示函数的数组  路由
  const length = ShowNames.length
  const width = parseInt(24 / ShowNames.length, 10)

  const createCols = (currentValues) => {
    const colsContainer = []
    for (let j = 0; j < EachColRender.length; j++) {
      const cols = EachColRender[j].ColRender(currentValues, width)
      colsContainer.push(cols)
    }
    return colsContainer
  }
  const RowsAndCols = dataSource.map((currentValues, index) => {
    const colsContainer = createCols(currentValues)
    const rowsAndCols = colsContainer.map((value) => {
      return value
    })
    return (
      <Row>
        <Row key={index} type="flex" justify="space-around">
          {rowsAndCols}
        </Row>
        <hr className={style.hrStyle}/>
      </Row>
    )
  })

  const Title = ShowNames.map((currentValues, index) => {
    return <Col key={index} span={width}><p style={{ textAlign: 'center' }}>{currentValues}</p></Col>
  })

  return (
    <Tooltip
      title="Click jump to Settings page."
      onClick={() => {
        dispatch(routerRedux.push({
          pathname: pathName,
        }))
      }}>
      <Row className={style.card}>
        <Row justify="center">
          <Col>
            <div className={style.topTitle}>
              Current Exchange Rate
            </div>
          </Col>
        </Row>
        <Row className={style.Title} type="flex" justify="space-around">
          {Title}
        </Row>
        <hr className={style.hrStyleTitle}/>
        {RowsAndCols}
      </Row>
    </Tooltip>
  )
}
Card.propTypes = {
  dataSource: PropTypes.array,
  ShowNames: PropTypes.array,
  RowTotal: PropTypes.number,
  EachColRender: PropTypes.array,
}
export default Card
